<template>
	<view>
		<view class="show" v-if="isShow" :style="{height:windowHeight+'px'}">
			<view class="select" v-for="(item,index) of selectName" @click="tabClick(item)">
				<view class="select-item" @click="selectTick">
					<view class="select-content">
						<image class="select-icon" :src="item.icon"></image>
						<view class="select-name">
							<text>{{item.name}}</text>
							<text>{{item.binding}}</text>
						</view>
					</view>
					<view class="select-tick" v-show="idx==index">
						<image src="../../../../static/tick.png"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="item">
			<view class="item-conten item-select" @click="bankTypeShow()">
				<text>类型:</text>
				<input type="text" disabled="" v-model="bankType" placeholder="请选择所添加的类型" />
				<image class="selectImage" src="../../../../static/select.png"></image>
			</view>
			<view class="item-conten" v-if="type==3">
				<text>银行名称:</text>
				<input class="item-con-inp" type="text" v-model="bankName" placeholder="请输入银行名称" />
				<text class="item-con-null"></text>
			</view>
			<view class="item-conten" v-if="type==3">
				<text>持卡人姓名:</text>
				<input class="item-con-inp" type="text" v-model="bank_uname" placeholder="请输入持卡人姓名" />
				<text class="item-con-null"></text>
			</view>
			<view class="item-conten">
				<text v-if="type==3">卡号:</text>
				<text v-if="type!=3">账户:</text>
				
				<input class="item-con-inp" v-if="type==3" type="text" v-model="bankCode" placeholder="请输入添加的卡号" />
				<input class="item-con-inp" v-if="type!=3" type="text" v-model="bankCode1" placeholder="请输入添加的账户" />
				<!-- <image class="image" src="../../../static/iamge-bank.png"></image> -->
				<text class="item-con-null"></text>
			</view>
		</view><!-- @click="gotoPath('/pages/user/add-bankCard/fill-mcg/fill-mcg') -->
		<view class="next" @click="$noMultipleClicks(addNext)">
			提交
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bankCode: '',
				bankCode1:'',//账户
				bankName: '',
				bank_uname:'',
				bankType:'',//提现类型
				type:'',//传值
				isShow:false,
				selectName: [{
						'name': '微信',
						'id': '0',
						'icon': '../../../../static/wx1.png',
						'type':1,
						//'binding': '未绑定',
					},
					{
						'name': '支付宝',
						'icon': '../../../../static/zfb1.png',
						//'binding': '未绑定',
						'id': '1',
						'type':2,
					},
					{
						'name': '银行卡',
						'icon': '../../../../static/complete.png',
						// 'binding': '尾号6666储蓄卡',
						'id': '2',
						'type':3,
					},
				],
				idx: "0",
				windowHeight:'',
				noClick:true,
			};
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight;
				}
			});
			//console.log(this.windowHeight)
		},
		methods: {
			bankTypeShow(){
				let self = this;
				self.isShow = true;
			},
			/* 切换导航条 */
			tabClick(item) {
				this.idx = item.id;
			},
			selectTick(e) {
				let self = this;
				let curTime = new Date().getTime();
				let lastTime = self.lastTapDiffTime;
				self.lastTapDiffTime = curTime;
				//两次点击间隔小于300ms, 认为是双击
				let diff = curTime - lastTime;
				if (diff < 300) {
			
					clearTimeout(self.lastTapTimeoutFunc); // 成功触发双击事件时，取消单击事件的执行
				} else {
					// 单击事件延时300毫秒执行
					self.lastTapTimeoutFunc = setTimeout(function() {
						//console.log(self.selectName[self.idx]);
						self.type = self.selectName[self.idx].type;
						self.bankType = self.selectName[self.idx].name;
						self.isShow = false
					}, 300);
				}
			},
			addNext() {
				let self = this;
				let bankmsg = {};
				
				if (self.bankType == '') {
					uni.showToast({
						title: '请选择类型！',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				if(self.type==3){
					if (self.bankName == '') {
						uni.showToast({
							title: '请输入银行名称！',
							duration: 2000,
							icon: 'none'
						});
						return;
					}
					if (self.bank_uname == '') {
						uni.showToast({
							title: '请输入持卡人姓名！',
							duration: 2000,
							icon: 'none'
						});
						return;
					}
					var pattern = /^([1-9]{1})(\d{14}|\d{18})$/;
					if (!pattern.test(self.bankCode)) {
						uni.showToast({
							title: '银行卡有误,请重新输入！',
							duration: 2000,
							icon: 'none'
						});
						return;
					}
				}else if(self.type != 3){
					if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(self.bankCode1)) {
						uni.showToast({
							title: '账户有误,请重填！',
							duration: 2000,
							icon: 'none'
						});
						return;
					}
					// if (self.bankCode1 == '') {
					// 	uni.showToast({
					// 		title: '请输入添加的账户！',
					// 		duration: 2000,
					// 		icon: 'none'
					// 	});
					// 	return;
					// }
				}								
				bankmsg.name = self.bankName;
				if(self.type == 3){
					bankmsg.bank_code = self.bankCode;
				}else{
					bankmsg.bank_code = self.bankCode1;
				}				
				bankmsg.bank_type = self.type;
				bankmsg.bank_uname = self.bank_uname;
				console.log(bankmsg)
				self._post(
					'user.index/add_bankcard',
					bankmsg,
					result => {
						console.log(result.code);
						if (result.code == 1) {
							uni.showToast({
								title: '添加成功！',
								duration: 2000,
								icon: 'none'
							});
							self.gotoPage('/pages/user/my-account/bank-card/bank-card');
						}
					},
					false,
					() => {
						uni.hideLoading();
					}
				)
			},
		}
	}
</script>

<style lang="scss">
	.show{
		width: 100%;	
		//height: 600px;
		//padding-top: 20rpx;
		position: fixed;
		//top: 0;
		left: 0;
		z-index: 99;
		background-color: #FFFFFF;
	}
	.select-item,
	.select-content {
		height: 120rpx;
		padding: 0 20rpx 0 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #FFFFFF;
		border-bottom: 2rpx solid #F4F4F4;
		overflow: hidden;
	}
	
	.select-icon {
		width: 70rpx;
		height: 70rpx;
		margin-right: 30rpx;
	}
	
	.select-tick {
		width: 50rpx;
		height: 50rpx;
	}
	
	.select-name {
		display: flex;
		flex-direction: column;
	
	}
	
	.select-name text:first-child {
		font-size: 30rpx;
		margin-bottom: 10rpx;
	}
	
	.select-name text:last-child {
		color: #a6a5a5;
	}
	
	.add-bank {
		width: 96%;
		height: 100rpx;
		margin: 40rpx auto 20rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		flex-direction: row;
		justify-content: center;
		color: #007AFF;
		line-height: 100rpx;
		font-size: 36rpx;
		border-radius: 14rpx;
	}
	
	.add-bank image {
		width: 40rpx;
		height: 40rpx;
	}
	
	.add-bank text {
		margin: 0 20rpx;
	}
	.item {
		display: flex;
		flex-direction: column;
	}

	.item-conten {
		width: 90%;
		height: 120rpx;
		line-height: 120rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		//justify-content: space-between;
		border-bottom: 2rpx solid #f4f4f4;
	}

	.item-conten text {
		font-size: 30rpx;

	}

	.item-conten input {
		font-size: 30rpx;
		margin-left: 40rpx;
		text-align: center;
	}
.item-con-inp{
	margin-left: 50rpx;
}
	.image {
		width: 80rpx;
		height: 60rpx;
		display: block;
		margin-left: 120rpx;
	}

	.next {
		width: 90%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		margin: 120rpx auto 0;
		background-color: rgba(88, 100, 253, 1);
		border-radius: 8rpx;
		color: #FFFFFF;
	}
	// .item-select{
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: space-between;
	// }
	.selectImage,.item-con-null{
		width: 60rpx;
		height: 60rpx;
	}
</style>
